﻿<!--
-----------------------------------------------------------------------------------
<copyright file="CheckMyCode.html" company="Microsoft Corporation">
         (c) © 2016 Microsoft. All rights reserved.

</copyright>
---------------------------------------------------------------------------------
-->

<!DOCTYPE html>
<html id="html" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/vader/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="CSS/CheckMyCode.css" />
    <script type="text/javascript" src="Ace/ace.js" charset="utf-8"></script>
    <script type="text/javascript" src="Ace/ext-language_tools.js"></script>
    <script type="text/javascript" src="Ace/snippets/java.js"></script>
    <script type="text/javascript" src="Ace/snippets/text.js"></script>
    <script type="text/javascript" src="Ace/ext-beautify.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="JS/CheckMyCode.js"></script>
    <script type="text/javascript" src="JS/ErrorResponse.js"></script>
    <script type="text/javascript" src="JS/JavaResponse.js"></script>
    <script type="text/javascript" src="JS/Beautify.js"></script>
    <script type="text/javascript" src="JS/jszip.min.js"></script>
    <script type="text/javascript" src="JS/FileSaver.js"></script>

    <title>CheckMyCode - IDE</title>
    <meta charset="utf-8" />
</head>
<body id="body">
    <header class="header">
        <h1 id="pageHeader">CheckMyCode</h1>
        <nav role="navigation"></nav>
        <script>
            $("nav").load("LoadHTML/Navigation.html");
        </script>
    </header>
    <br />
    <main id="main" role="main">
        <div id="intro">
            <h2 id="introHeader">Introduction</h2>
            <p>
                Welcome to CheckMyCode. This site was built for introductory computer science students, 
                but it can be used by anyone. Make sure you explore around the site and see everything 
                that there is to offer. While using the IDE, if you see an error that doesn't have information, 
                or you are unclear on exactly what it means, then please contact us with the exact text of 
                the error and the confusion that you are having. More information can be found on the 
                About page. We hope you enjoy the site!
            </p>
        </div>
        <div id="editor">
            <h2 id="editorHeader">Editor</h2>
            <input type="button" value="Open File" id="openFile"
                   onclick="javascript:document.getElementById('realOpenFile').click();">
            <input id="realOpenFile" class="realOpenFile" type="file" />
            <div class="clearfix"></div>
            <div class="tabs" id="tabs">
                <div class="tabScroll">
                    <ul id="tabList">
                        <li><input class="txt" type="text" />
                        <a href="#codeEditor0" class="tab">CheckMyCode</a>
                            <span class="ui-icon ui-icon-closethick"></span>
                        </li>
                    </ul>
                </div>

                <div style="background-color:white;height:20px" aria-hidden="true"></div>
                <div id="aboveCode">
                    <button id="addEdit" class="optionButton" type="button" onclick="createEditor()">Add Editor</button>
                    <button id="beautify" class="optionButton" type="button" onclick="beautify()">Format</button>
                    <button id="reset" class="optionButton" type="button" onclick="reset()">Reset</button>
                    <div class="floatRight">
                        <button id="downloadCurr" class="optionButton" type="button" 
                                onclick="downloadCurrent()">Download Current</button>
                        <button id="downloadAll" class="optionButton" type="button" 
                                onclick="downloadAll()">Download All as Zip</button>
                    </div>
                </div>

                <div id="codeEditor0" class="edit">public class CheckMyCode {

    public static void main(String[] args)  {
        //Enter code here...

    }
}
                </div>
                <div id="belowCode"><!--This is where info goes--></div>

            </div>
            <script type="text/javascript" src="JS/Editor.js"></script>
            <br />
            <form id="getCode" method="POST" action="#">
                <input type="checkbox" name="inputButton" id="inputButton" 
                       class="inputButton" title="Add custom input" />
                <label for="inputButton" class="input-label">Custom input</label>
                <br />
                <input type="checkbox" name="argsButton" id="argsButton"
                       class="argsButton" title="Use args input" disabled />
                <label for="argsButton" class="args-label">Use as command line input</label>

                <input id="compile" type="button" name="compile" value="Compile and Run" onclick="cmpl()" />
            </form>
            <br />
            <br />
            <div id="customInput">
                <textarea id="customInputArea" title="Write custom input here"></textarea>
            </div>
        </div>
        <br />
        <div id="console">
            <h2 id="consoleHeader">Console</h2>
            <div id="consoleArea">
                <div id="contentExtend" class="contentExtend"></div>
            </div>
        </div>
    </main>
    <br />
    <footer role="contentinfo">
        <script>
            $("footer").load("LoadHTML/Footer.html");
        </script>
    </footer>
</body>
</html>